<script setup lang="ts">
import { ref } from 'vue';

defineOptions({ name: 'FaultDiagnosis' });

// 模拟故障诊断数据
const faultData = ref([
  {
    type: '驱动程序问题',
    status: '可修复',
    description: 'GPU驱动版本不匹配或损坏',
    icon: 'mdi-wrench'
  },
  {
    type: '内存泄漏',
    status: '可修复',
    description: 'AI模型运行过程中内存未正确释放',
    icon: 'mdi-memory'
  },
  {
    type: '性能下降',
    status: '可修复',
    description: '模型推理速度低于阈值',
    icon: 'mdi-speedometer-slow'
  },
  {
    type: '系统崩溃',
    status: '需人工干预',
    description: '操作系统或服务异常终止',
    icon: 'mdi-alert-octagon'
  },
  {
    type: '硬件故障',
    status: '需人工干预',
    description: 'GPU或CPU硬件损坏',
    icon: 'mdi-server-off'
  }
]);
</script>

<template>
  <NCard :bordered="false" class="card-wrapper h-full">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-xl font-semibold flex items-center">
        <SvgIcon icon="mdi-tools" class="mr-2 text-primary" />
        故障诊断能力
      </h3>
      <NBadge type="success" value="3/5 可自动修复" />
    </div>
    <div class="space-y-4">
      <div v-for="fault in faultData" :key="fault.type" class="flex items-start p-3 rounded-lg bg-gray-50">
        <div :class="{ 'text-success': fault.status === '可修复', 'text-danger': fault.status === '需人工干预' }" class="mr-3 mt-1">
          <SvgIcon :icon="fault.icon" />
        </div>
        <div class="flex-1">
          <div class="flex items-center justify-between">
            <span class="font-medium">{{ fault.type }}</span>
            <span :class="{ 'text-success': fault.status === '可修复', 'text-danger': fault.status === '需人工干预' }">
              {{ fault.status }}
            </span>
          </div>
          <p class="text-sm text-gray-500 mt-1">{{ fault.description }}</p>
        </div>
      </div>
    </div>
  </NCard>
</template>

<style scoped></style>